<template>
  <div class="content_box" id="pdfDomFK">
    <div class="top">
      <div class="centent">
        <h3>应收账款确认凭证</h3>
      </div>
      <div class="content_box_top">
        <div class="title">申请方</div>
        <ul>
          <li>
            <span style="width: 200px">企业名称：</span>
            <span>{{ entname }}</span>
          </li>
          <li>
            <span style="width: 200px">统一社会信用代码：</span>
            <span>{{ entLicenseno }}</span>
          </li>
        </ul>
        <div class="title" style="margin-top: 30px">确认方</div>
        <ul>
          <li>
            <span style="width: 200px">企业名称：</span>
            <span>{{ orgname }}</span>
          </li>
          <li>
            <span style="width: 200px">统一社会信用代码：</span>
            <span>{{ orgLicenseno }}</span>
          </li>
        </ul>
      </div>
      <p style="font-size: 16px; color: #000; font-weight: 600; margin-top: 30px">
        1 具体应收账款信息见下表：
      </p>
      <div class="table">
        <el-table
          class="tableaaa"
          style="width: 100%"
          :data="userData"
          border
          highlight-current-row
          stripe
          :header-cell-style="{
            color: '#4D4D4D'
          }"
        >
          >
          <el-table-column prop="a" label="合同编号" min-width="5%" align="center">
          </el-table-column>
          <el-table-column prop="b" label="合同名称" min-width="5%" align="center">
          </el-table-column>
          <el-table-column prop="c" label="发票号码" min-width="5%" align="center">
          </el-table-column>
          <el-table-column prop="d" label="发票代码" min-width="5%" align="center">
          </el-table-column>
          <el-table-column prop="e" label="应收账款金额（元）" min-width="6%" align="center">
            <template slot-scope="scope">{{ scope.row.e | getArea }}</template>
          </el-table-column>
          <el-table-column prop="f" label="付款日期" min-width="4%" align="center">
          </el-table-column>
        </el-table>
      </div>
      <p style="font-size: 16px; color: #000; font-weight: 600; margin-top: 30px">
        2 自本文件双方完成签署之日起，上述合同收款账户变更为如下账户：
      </p>
      <div class="table">
        <el-table
          class="tableaaa"
          style="width: 100%"
          :data="userData"
          border
          highlight-current-row
          stripe
          :header-cell-style="{
            color: '#4D4D4D'
          }"
        >
          >
          <el-table-column prop="g" label="户名" min-width="10%" align="center"> </el-table-column>
          <el-table-column prop="h" label="账号" min-width="10%" align="center"> </el-table-column>
          <el-table-column prop="i" label="开户行" min-width="8%" align="center"> </el-table-column>
        </el-table>
      </div>
      <p style="font-size: 16px; color: #000; font-weight: 600; margin-top: 30px">
        3 鉴于申请方拟向中国邮政储蓄银行股份有限公司办理<span style="text-decoration: underline"
          >应收账款质押融资</span
        >业务，经应收账款确认申请方（<span style="color: #000; font-weight: 600">{{ entname }}</span
        >）与应收账款确认方（<span style="color: #000; font-weight: 600">{{ orgname }}</span
        >）双方协商达成一致声明如下：
      </p>
      <p>（1）上述应收账款对应的交易及资料真实、合法、有效；</p>
      <p>
        （2）本凭证自双方完成签署之日起，申请方通过应收账款确认融资时，本应收账款确认凭证项下应收账款全部由申请方质押给中国邮政储蓄银行股份有限公司；
      </p>
      <p>
        （3）本凭证自双方完成签署之日起，针对上述应收账款项下付款均以现金转账方式支付至上述收款账户，并由申请方专项用于偿还申请方在中国邮政储蓄银行股份有限公司业务融资。
      </p>
    </div>
    <div class="content_box_top content_box_bottom">
      <div class="title">
        申请方:
        <span style="line-height: 0">{{ entname }}</span>
        <p style="line-height: 0">（公章）</p>
      </div>

      <div class="title">
        确认方: <span style="line-height: 0">{{ orgname }}</span>
        <p style="line-height: 0">（公章）</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['formList'],
  data() {
    return {
      userData: null,
      orgname: '',
      entname: '',
      entLicenseno: '',
      orgLicenseno: ''
    }
  },
  // 过滤器
  filters: {
    getArea: function (value) {
      value = parseFloat(value)
      if (!value) return '-'
      // 将数值截取，保留两位小数
      value = value.toFixed(2)
      if (value <= 0) return '-'
      // 获取整数部分
      const intPart = Math.trunc(value)
      // 整数部分处理，增加,
      const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
      // 预定义小数部分
      let floatPart = '.00'
      // 将数值截取为小数部分和整数部分
      const valueArray = value.toString().split('.')
      if (valueArray.length === 2) {
        // 有小数部分
        floatPart = valueArray[1].toString() // 取得小数部分
        return intPartFormat + '.' + floatPart
      }
      return intPartFormat + floatPart
    }
  },
  mounted() {
    this.userData = this.formList
    this.entname = sessionStorage.getItem('entname')
    this.orgname = localStorage.getItem('orgname')
    this.entLicenseno = localStorage.getItem('entLicenseno')
    this.orgLicenseno = localStorage.getItem('orgLicenseno')
  }
}
</script>

<style lang="scss" scoped>
.content_box {
  box-sizing: border-box;
  padding: 0 0.4167rem;
  padding-bottom: 0.2604rem;
  width: 100%;
  overflow: auto;
  .top {
    box-sizing: border-box;
    padding-bottom: 0.0052rem;
  }
  h6 {
    font-size: 15px;
    color: #777;
    font-weight: 400;
    font-family: '仿宋';
    //   font-family:'仿宋';
  }
  h5 {
    font-size: 15px;
    color: #000;
    font-family: '仿宋';
  }
  p {
    font-size: 16px;
    color: #222;
    line-height: 0.1563rem;
    font-family: '仿宋';
  }
  .centent {
    width: 100%;
    text-align: center;
    margin: 0.026rem 0;
    h3 {
      font-size: 20px;
      color: #000;
      font-family: '仿宋';
    }
  }
  .content_box_top {
    width: 100%;

    .title {
      font-size: 15px;
      color: #000;
      font-weight: 600;
      font-family: '仿宋';
      line-height: 0.2604rem;
    }
    ul {
      li {
        span {
          display: inline-block;
          font-size: 17px;
          color: #000;
          font-family: '仿宋';
          line-height: 0.1823rem;
        }
      }
    }
  }
  .content_box_bottom {
    margin-top: 0.5208rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    span {
      display: inline-block;
      font-size: 16px;
      color: #222020;
      font-weight: 400;
      font-family: '仿宋';
    }
    p {
      display: flex;
      justify-content: center;
      font-size: 15px;
      color: #222020;
      font-weight: 400;
      font-family: '仿宋';
    }
  }
  .right {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-bottom: 0.0677rem;
    div {
      display: flex;
      color: #222;
      font-family: '仿宋';
      font-size: 16px;
      span {
        width: 0.2083rem;
      }
    }
  }
}

// 表格
.table {
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
  overflow: auto;
  margin: 0.0521rem 0;
  display: flex;
}
::v-deep .el-table .el-table__cell {
  text-align: center;
}
::v-deep .el-table {
  font-size: 0.0729rem;
  font-family: '仿宋';
}
</style>
